<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
    <hr>
    <h2>测试1:{{ a }}</h2>
    <h2>测试2:{{ c }}</h2>
    <h2>测试3:{{ d }}</h2>
    <button @click="b">测试</button>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'Person',
    beforeCreate() {
      console.log('beforeCreate')
    },
    data() {
      return {
        a: 100,
        c: this.name,
        d: 900
      }
    },
    methods: {
      b() {
        console.log('b')
      }
    },
    // data 和 methods 可以和 setup 同时存在, setup 导出的数据在 data 中可以使用 this 读取.
    // 新写法的 setup 中, 无法读取 data 和 methods 中的数据.
    setup() {
      // 数据 原来是写在 data 中的, 此时的 name, age, tel 都不是响应式数据
      let name = '张三' // 此时 name 不是响应式的.
      let age = 18  // 此时的 age 不是响应式的.
      let tel = '13888888888' // 此时的 tel 不是响应式的.
      // let x = d
      // 1. 选项式语法可以和 setup 语法共存
      // 2. 旧语法中结构可以读取 setup 中的内容, 但 setup 中无法读取旧写法中的数据

      // 方法
      function changeName() {
        name = 'zhang-san'  // 这样修改 name 页面是没有变化的, name 确实修改了, 但是 name 不是响应式的.
      }
      function changeAge() {
        age += 1
      }
      function showTel() {
        alert(tel)
      }

      return {name, age, changeName, changeAge, showTel}

      // setup 的返回值也可以是一个渲染函数
      // return () => '哈哈哈'
    }
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>